<template>
  <div class="app-container" ref="container">
    <el-space alignment="flex-start">
      <el-scrollbar>
        <div class="tree" justify="space-between" :style="{ width: treeWidth + 'px' }" ref="treeRef">
          <Tree :treeData="treeData" :defaultProps="defaultProps" nodeKey="id" :currentNodeKey="currentKey"
            @handleNodeClick="handleNodeClick" v-loading="loading" :isShowTitle="true" v-model:isExpand="isExpand" />
          <el-empty v-if="treeData.length == 0" description="暂无数据" />
        </div>
      </el-scrollbar>
      <div class="queryList" :style="{ width: queryListWidth + 'px' }" ref="list">
        <el-space alignment="flex-start">
          <!-- <el-scrollbar> -->
          <div class="queryList subject">
            <el-tabs v-model="activeTab" type="card" class="query-tabs">
              <el-tab-pane label="待质检" name="1"></el-tab-pane>
              <el-tab-pane label="质检未通过" name="2"></el-tab-pane>
              <el-tab-pane label="质检通过" name="3"></el-tab-pane>
            </el-tabs>
            <TabTree :treeData="treeData" :activeTab="activeTab" :id="currentKey" :isPmId="isPmId" :pmId="pmId" />
          </div>
          <!-- </el-scrollbar> -->
        </el-space>
      </div>
    </el-space>
    <router-view></router-view>
  </div>
</template>
<script setup name="dataIntergrate">
import { getTreeList } from '@/api/businessManage/dataIntegrate'
import Tree from '@/components/Tree'
import useTreeSpace from '@/hooks/useTreeSpace'
import TabTree from './tabTree.vue'

const router = useRouter()
const route = useRoute()
const loading = ref(false)
// let baseUrl = ref('')
// let idName = ref('')
let isPmId = ref(true)

// 树结构
const isExpand = ref(true)
const treeWidth = computed(() => isExpand.value ? 200 : 20)
const { container, treeRef, queryListWidth } = useTreeSpace(treeWidth.value)
const treeData = ref([])
const defaultProps = {
  children: 'list',
  label: 'name',
}
const pmId = ref()
const currentKey = ref('')
const activeTab = ref('1')
const getTreeData = () => {
  loading.value = true
  getTreeList().then(res => {
    treeData.value = res.data
    loading.value = false
    currentKey.value = treeData.value[0]?.id
    pmId.value = treeData.value[0]?.id
  })
}

const handleNodeClick = (data, node) => {
  if (node.level == 2) {
    currentKey.value = data.id
    isPmId.value = false
  } else {
    isPmId.value = true
    currentKey.value = data.id
    pmId.value = data.id
  }
}

// const ids = ref([])
// const tableChange = (val) => {
//   ids.value = val.map(item => item[idName.value])
// }

onMounted(() => {
  getTreeData()
})

watch(currentKey, () => {
  if (route.name == 'main' && currentKey.value) {
    router.push({ path: '/businessManage/dataIntegrate/main', query: { id: currentKey.value } })
  }
}, { immediate: true, deep: true })

watch(() => route.query.id, () => {
  if (!route.query.id && route.name == 'main') {
    router.push({ path: '/businessManage/dataIntegrate/main', query: { id: currentKey.value } })
  }
})
</script>
<style scoped lang="scss">
.app-container {
  height: 100%;

  .el-space {
    height: 100%;
    width: 100%;

    :deep(.el-space__item) {
      width: 100%;
      height: 100%;
    }

    .tree,
    .queryList {
      display: inline-block;
      width: calc(100% - 20px);
      height: 100%;
    }
  }

  :deep(.el-space.upload-space) {
    width: 100%;

    .el-space__item {
      width: 100%;
    }
  }

  :deep(.el-space.space-width100) {
    .el-space__item {
      width: 100%;
    }
  }
}
</style>